import { customRef } from "vue";

// 在ref数值更新后，过一段事件才更新页面绑定元素
export default function(initValue:string, delay:number) {
    let timer:number

    let msg = customRef((track, trigger) => {
        return {
            // initValue被读取时调用get
            get() {
                track() // 告诉vue这个数很重要, 一旦msg变化，就去更新
                return initValue;
            },
            // initValue被修改时调用set
            set(value) {
                // 使用定时器来实现延迟更新，并且每次点击清除上次的定时器，防止点击太快出现抖动
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    initValue = value
                    trigger() // 通知vue数据变化了
                }, delay)
            },
        }
    })
    return msg
}